<template>
	<image :src="theme?.bg?.user" class="top_img" :style="{ height: 'calc(562rpx + ' + topH + 'px)' }"></image>
	<view class="container" :style="[{ paddingTop: topH + 'px' }]">
		<view class="setting flex items-center">
			<view class="icon" @click="goUrl(`/pages/user/set/setting`, 2)">
				<image src="/static/profile/ic_wdshez2.png"></image>
			</view>
			<view class="icon" @click="goUrl(`/pages/user/notify`, 2)">
				<image src="/static/profile/ic_wodnews@2x.png" class="icon"></image>
				<up-badge :isDot="true" type="success" :offset="[-2, -2]" bgColor="#FB3204" :absolute="true" v-if="userInfo.notify_num > 0"></up-badge>
			</view>
		</view>

		<view class="infos flex items-center justify-between">
			<block v-if="userInfo.code">
				<view class="photo">
					<image :src="imgUrl + userInfo.photo"></image>
				</view>
				<view class="composite flex-1">
					<view class="top flex items-center">
						<view class="nickname line-1-clamp" style="max-width: 50%">{{ userInfo.nickname }}</view>
						<view class="level" v-if="userInfo.level_name">
							<image src="/static/profile/ic_huiydjtu.png" class="icon"></image>
							<text>{{ userInfo.level_name }}</text>
						</view>
					</view>
					<view class="bottom flex items-center">
						<view class="item flex items-center">
							<image src="/static/profile/ic_wdphone.png" class="icon"></image>
							<text>{{ userInfo.mobile }}</text>
						</view>
						<view class="item">
							<text>ID：{{ userInfo.code }}</text>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="flex items-center justify-center flex-1">
					<view class="border-btn flex items-center" @click="goUrl('/pages/login_wechat')" style="padding:8rpx 20rpx;border-radius: 27rpx;">
						<uni-icons type="auth" size="22" :color="theme?.themeColor"></uni-icons>
						<text style="margin-left: 10rpx;font-size: 25rpx;">点击登录</text>
					</view>
				</view>
			</block>
		</view>

		<view class="fill">
			<view class="fill-box">
				<view class="account flex items-center">
					<block v-for="(item, index) in userInfo.assets" :key="index">
						<view
							class="item flex flex-col items-center"
							@click="goUrl(`${item.url}`)"
							:style="{ width: (100 / userInfo.assets?.length + 1).toFixed(3) + '%' }"
						>
							<view class="val">{{ item.balance }}</view>
							<view class="title">{{ item.title }}</view>
						</view>
					</block>
				</view>

				<view class="order-box" v-for="(item, index) in menu" :key="index">
					<view class="order_list">
						<view class="order_top">
							<view class="label">{{ item.title }}</view>
							<view class="subtitle flex items-center justify-between" @click="goUrl(item.url, 2)" v-if="item.subtitle">
								<text>{{ item.subtitle }}</text>
								<u-icon name="arrow-right" color="#666" size="12"></u-icon>
							</view>
						</view>
					</view>
					<view class="orders">
						<u-grid :border="false" col="4">
							<u-grid-item v-for="(item2, index2) in item.children" :key="index2" class="menuli_1" @click="goUrl(item2.url, 2)">
								<image :src="imgUrl + item2.icon" :class="{ 'lin-icon': item.mark == 'common' }"></image>
								<view class="grid-text">{{ item2.title }}</view>
								<u-badge shape="horn" bgColor="#F81A2E" max="99" :value="item2.count" :absolute="true" :offset="[-5, 23]" v-if="item.type != 5"></u-badge>
							</u-grid-item>
						</u-grid>
					</view>
				</view>

				<view class="bom-tips flex flex-col items-center justify-center">
					<view>{{ userInfo.filing_number }}</view>

					<view>{{ userInfo.technical_support }}</view>
				</view>
			</view>
		</view>
	</view>
	<LoginPopup v-bind="loginPopupRef" v-model:show="loginPopupRef.show" :profile="userInfo" @submit="loginPopupChange" />
</template>

<script setup>
	import { ref, reactive, inject, computed, onMounted } from 'vue';
	import { port, imgUrl, goUrl, hint } from '/service/port';
	import { onReachBottom, onPullDownRefresh, onLoad, onShow } from '@dcloudio/uni-app';
	import LoginPopup from '/components/LoginPopup/LoginPopup.vue';
	import { useTitleStore } from '@/stores/title';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();

	onLoad(() => {
		uni.setNavigationBarTitle({
			title: useTitleStore().globalTitle
		});
	});
	const loginPopupRef = ref({ show: false });
	const topH = ref(0);
	const source = ref('h5');

	onShow(() => {
		getUserMenu();
		// #ifdef MP-WEIXIN
		const menuInfo = inject('menuButtonInfo');
		topH.value = menuInfo.top;
		source.value = 'mp-weixin';
		if (uni.getStorageSync('token')) {
			getUserIndex();
		}
		// #endif

		// #ifdef H5
		getUserIndex();
		// #endif
	});

	function loginPopupChange() {
		getUserIndex();
	}

	const menu = ref([]);
	async function getUserMenu() {
		let res = await port('getUserMenu');
		menu.value = res.data;
	}

	const userInfo = ref({});
	async function getUserIndex() {
		let res = await port('getUserIndex');
		userInfo.value = res.data;

		// #ifdef MP-WEIXIN
		if (userInfo.value.is_photo == 1) {
			loginPopupRef.value.show = true;
		}
		// #endif
	}
</script>

<style scoped lang="scss">
	// #ifdef H5
	::v-deep page {
		background-color: #f4f5f8;
	}
	// #endif
	// #ifdef MP-WEIXIN
	:global(page) {
		background-color: #f4f5f8;
	}

	// #endif
	.top_img {
		width: 100%;
		height: 562rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.container {
		position: relative;

		.setting {
			padding: 36rpx;
			.icon {
				width: 50rpx;
				height: 48rpx;
				position: relative;
				margin-right: 32rpx;
				> image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.infos {
			margin: 20rpx 30rpx 27rpx 30rpx;
			.photo {
				background: #ffffff;
				box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(228, 47, 4, 0.26);
				border-radius: 50%;
				border: 5rpx solid #ffffff;
				width: 108rpx;
				height: 108rpx;
				> image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.composite {
				margin-left: 22rpx;
				.top {
					.nickname {
						font-weight: 500;
						font-size: 34rpx;
						color: #000000;
					}
					.level {
						margin-left: 30rpx;
						position: relative;
						background: linear-gradient(-90deg, #ff8430 0%, #ffab3e 100%);
						border-radius: 16rpx;
						height: 35rpx;
						line-height: 30rpx;
						text-align: center;
						.icon {
							width: 64rpx;
							height: 54rpx;
							position: absolute;
							left: -22rpx;
							top: 50%;
							transform: translateY(-50%);
						}
						> text {
							font-weight: 400;
							font-size: 22rpx;
							color: #ffffff;
							padding: 0rpx 14rpx 0 40rpx;
						}
					}
				}

				.bottom {
					margin-top: 15rpx;
					gap: 35rpx;
					.item {
						.icon {
							width: 24rpx;
							height: 27rpx;
							margin-right: 10rpx;
						}
						> text {
							font-weight: 400;
							font-size: 24rpx;
							color: #444444;
						}
					}
				}
			}
		}

		.fill {
			position: relative;
			border-radius: 30rpx 30rpx 0rpx 0rpx;

			min-height: 300rpx;
			// #ifdef H5
			padding-bottom: 120rpx;
			// #endif

			// #ifdef MP-WEIXIN
			padding-bottom: 20rpx;
			// #endif

			.fill-box {
				margin: 0 30rpx;
			}
			.account {
				padding-bottom: 14rpx;
				.item {
					.val {
						font-weight: 500;
						font-size: 34rpx;
						color: #000000;
					}
					.title {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						margin-top: 15rpx;
					}
				}
			}

			.order-box {
				background: #ffffff;
				border-radius: 20rpx;
				margin-top: 24rpx;
				.order_list {
					.order_top {
						padding: 30upx 30upx 38upx 30upx;
						display: flex;
						line-height: 40upx;
						justify-content: space-between;
						.label {
							font-size: 32upx;
							color: #000;
							font-weight: 600;
						}
						.subtitle {
							font-size: 24upx;
							color: #666;
							> text {
								margin-right: 5rpx;
							}
						}
					}
				}

				.orders {
					.menuli {
						flex: 1;
						position: relative;
						text-align: center;
						> image {
							width: 64upx;
							height: 56upx;
						}
						> view {
							color: #333;
							font-size: 24upx;
							margin-top: 10upx;
						}
					}
					.menuli_1 {
						flex: 1;
						position: relative;
						text-align: center;
						padding-bottom: 30upx;
						> image {
							width: 66upx;
							height: 66upx;
						}
						.lin-icon {
							width: 66upx;
							height: 66upx;
						}
						> view {
							color: #000;
							font-size: 24upx;
							margin-top: 10upx;
						}
					}
				}
			}

			.bom-tips {
				margin-top: 50rpx;
				> view {
					margin-bottom: 20rpx;
					font-size: 23rpx;
					color: #999;
					// padding: 0.15625rem 0;
				}
			}
		}
	}
</style>
